<template>
   <div>
     <div id="mapEchartView"></div>
   </div>
 </template>
 <script>
 import * as echarts from "echarts";
 import xianjuGeoJSON from "./xianjujson.json";
//  import aimg from "@/assets/img/iamhs.png";
 import jsonadata from "./datajson.json";

// import piontdata from "./datajson.json
 // import rebackimg from "@/assets/image/mapreback.png"
 export default {
   name: "PAichartMAP", 
   props: {
     opinionData: {
       type: Array,
     },
     xzName: {
       type: String,
       default: () => "仙居",
     },
   },
   data() {
     return {
       jsonadata,
      //  aimg,
       pagedate: [],
       // rebackimg,
       charts: null,
       chartData: {},
       option: {},
       lineChartInterval: null,
       app: {
         currentIndex: -1,
       },
     };
   },
   watch: {},
   // destroyed() {},
   //调用
   mounted() {
     this.jsondata();
     this.getfirst();
   },
   methods: {
     getfirst() {
       this.charts = echarts.init(document.getElementById("mapEchartView"));
 
       this.drawMap(xianjuGeoJSON, "xianju");
     },
     rebackxianju(){
       this.drawMap(xianjuGeoJSON, "xianju");
 
     },
     drawMap(codejson, name) {
       let that = this;
       echarts.registerMap(name, codejson);
 
      //  let image = new Image();
      //  image.src = aimg;
       let option = {
         // toolbox: {
         //   feature: {
         //     myBack: {
         //       show: true,
         //       title: "返回",
         //       // icon: rebackimg,
         //       // iconStyle: {
         //       //   color: "#1aaef6",
         //       //   borderColor: "#1aaef6",
         //       // },
         //       // onclick: function () {
         //       //   var opt = this.drawMap(xianjuGeoJSON, "xianju");
         //       //   opt.toolbox.feature.myBack.show = false;
         //       //   that.charts.setOption(opt);
         //       // },
         //     },
         //   },
         // },
         geo: [
           {
             map: name,
             layoutSize: "100%",
             aspectScale: 1,
             itemStyle: {
               show: true,
               color: {
               //   image: image, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                 repeat: "repeat", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
               },
               borderColor: "#456caa",
               borderWidth: 1,
             },
             z: 4,
             layoutCenter: ["50%", "50%"],
             label: {
               normal: {
                 show: true, //显示省份标签
                 textStyle: {
                   color: "rgb(249, 249, 249)", //省份标签字体颜色
                   fontSize: 12,
                 },
               },
               emphasis: {
                 focus: "none", //高亮时聚焦自己
                 itemStyle: {
                   areaColor: "#2080D7",
                   borderColor: "#2B91B7", //地图区域的颜色。
                   borderWidth: 2,
                   opacity: 1,
                   shadowColor: "rgba(74, 188, 251, 0.4)",
                   shadowBlur: 3,
                   shadowOffsetX: 3,
                   shadowOffsetY: 3,
                 },
               },
             },
           },
         //   {
         //     map: name,
         //     aspectScale: 0.9,
         //     roam: false, //是否允许缩放
         //     zoom: 1, //默认显示级别
         //     layoutSize: "98%",
         //     layoutCenter: ["50.3%", "50.5%"],
         //     itemStyle: {
         //       areaColor: "#70faf8",
         //       borderColor: "none",
         //     },
         //     z: 2,
         //     silent: true,
         //   },
         //   {
         //     map: name,
         //     aspectScale: 0.98,
         //     roam: false, //是否允许缩放
         //     zoom: 1, //默认显示级别
         //     layoutSize: "98%",
         //     layoutCenter: ["50.3%", "50.5%"],
         //     itemStyle: {
         //       //    areaColor: '#fffff',
         //       borderColor: "#fffff",
         //     },
         //     z: 3,
         //     silent: true,
         //   },
           {
             map: name,
             aspectScale: 0.85,
             roam: false, //是否允许缩放
             zoom: 1, //默认显示级别
             layoutSize: "96%",
             layoutCenter: ["51%", "52.5%"],
             itemStyle: {
               normal: {
                 areaColor: "#324252",
                 borderColor: "#00d5ff",
                 borderWidth: 2,
                 shadowColor: "rgba(63, 218, 255)",
                 shadowBlur: 35,
               },
             },
             z: 1,
             silent: true,
           },
         ],
 
         series: [
         {
                 type: 'effectScatter',
                 coordinateSystem: 'geo',
                 symbolSize:5,
                 label: {
               normal: {
                 formatter: "{b}",
                 position: "right",
                 show: false,
               },
               emphasis: {
                 show: true,
               },
             }, 
                 data:that.pagedate,
           
                 showEffectOn: 'render',
                
                 hoverAnimation: true,
                 
                 itemStyle: {
                     normal: {
                         color: 'yellow',
                         shadowBlur: 10,
                         shadowColor: 'yellow',
                     },
                 },
                 zlevel: 1,
             },
          
         ],
       };
       that.charts.setOption(option);
       this.option = option;
       that.charts.on("click", (params) => {
         that.ontwoenlick(params);
       });
       that.charts.on("dblclick", () => {
         this.drawMap(xianjuGeoJSON, "xianju");
       });
     },
     random(num) {
     return Math.floor(Math.random() * num);
 },
     jsondata() {
       var res = [];
       let that=this
       jsonadata.map((item) => {
         res.push({
           name: item.faddress,
           value: [item.longitude, item.latitude], 
           itemStyle: {
             normal: {
               color:"#e28b42",
               shadowBlur: 10,
               shadowColor: "#333",
             },
           },
         });
       });
       that.pagedate = res;
 
       // console.log(that.pagedate )
     },
     ontwoenlick(params) {
       let that = this;
       var name = params.name; //地区name
       var minicode = null;
 
       xianjuGeoJSON.features.map((item) => {
         if (item.properties.name == params.name) {
           return (minicode = item);
         }
       });
       let newjsondata = {
         type: "FeatureCollection",
         features: [minicode],
         name: name,
       };
       // this.option.toolbox.feature.myBack.show = true;
       that.$emit("chooseXiangzhen", name);
 
  
       that.drawMap(newjsondata, name);
     },
   },
 };
 </script>
 <style scoped>
 * {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 #mapEchartView {
  height: 800px;

 }
 </style>
 